import { image } from './imgConfigMap'
export const data = {
  id: 'user',
  img: image.user,
  children: [
    {
      id: 'skweb',
      img: image.tomcat,

      children: [
        {
          id: 'skweb2',
          img: image.tomcat,
          x: 100,
          y: 100,

          children: [
            {
              id: 'skweb21',
              img: image.tomcat,
            },
          ],
        },
        {
          id: 'skweb3',
          img: image.tomcat,

          children: [
            {
              id: 'localhost:3306',
              img: image.mysql,
            },
          ],
        },
      ],
    },
  ],
}

export const TreeGraph = {
  container: 'container',
  width: 1000,
  height: 500,
  modes: {
    default: [
      'drag-canvas',
      'drag-canvas',
      'zoom-canvas',
      {
        type: 'drag-node',
        enableDelegate: false,
        shouldBegin: (e) => {
          return true
        },
      },

      {
        type: 'create-edge',
        key: 'shift',
      },
    ],
  },
  defaultNode: {
    size: 50,
    type: 'circle',
  },
  defaultEdge: {
    color: '#000',
    style: {
      endArrow: true,
    },
  },

  layout: {
    type: 'dendrogram', // 布局类型
    direction: 'LR', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT
    nodeSep: 200, // 节点之间间距
    rankSep: 100, // 每个层级之间的间距
  },

  edgeStateStyles: {
    hover: {
      stroke: 'steelblue',
      lineWidth: 3,
    },
  },
}
